<@override name="content">
    <div class="header">
      <h1 class="page-title">查看题目</h1>
    </div>
    <ul class="breadcrumb">
      <li>
        <a href="admin">首页</a>
        <span class="divider">/</span>
      </li>
      <li>
        <a href="admin/problem">题目管理</a>
        <span class="divider">/</span>
      </li>
      <li class="active">查看题目</li>
    </ul>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="well">
          <div id="container">
          
            <ul class="pager">
              <li class="previous <#if prevPid==problem.pid>disabled</#if>">
                <a href="admin/problem/show/${prevPid!}" title="Show previous problem.">&lt;&lt;Prev</a>
              </li>
              <li class="next <#if nextPid==problem.pid>disabled</#if>">
              <a href="admin/problem/show/${nextPid!}" title="Show next problem.">Next&gt;&gt;</a>
              </li>
            </ul>
            
            <div class="text-center">
              <h2>
                <span class="black pts"><a href="problem/show/${problem.pid!}" target="_blank">${problem.pid!}</a>:</span> 
                <#if problem.status==false><del></#if>
                <span class="title"><a href="#" id="title">${problem.title!}</a></span>
                <#if problem.status==false></del></#if>
                <#if spj?? && spj><span class="badge badge-important">SPJ</span><br></#if>
              </h2>
              <div class="problem-admin">
                <a href="admin/problem/data/${problem.pid!}" class="btn btn-primary">Data</a>
                <a href="problem/rejudge/${problem.pid!}" class="btn btn-danger">Rejudge</a>
              </div>
              <div class="problem-info">
                <div>
                  Time Limit:<a href="#" id="timeLimit">${problem.timeLimit!}</a> MS
                  Memory Limit:<a href="#" id="memoryLimit">${problem.memoryLimit!}</a> KB
                </div>
                <div>
                  Total Submit:<a href="status?pid=${problem.pid!}" target="_blank">${problem.submission!}</a> 
                  Accepted:<a href="status?pid=${problem.pid!}&result=0" target="_blank">${problem.accepted!}</a> 
                  Page View:<span class="pts">${problem.view!}</span><br>
                </div>
              </div>
              <a href="problem/submit/${problem.pid!}?ajax=1" class="btn btn-info" data-toggle="modal" data-target="#submitModal">Submit</a>
              <a href="problem/status/${problem.pid!}" class="btn btn-info" target="_blank">Status</a>
              <a href="bbs/?pid=${problem.pid!}" class="btn btn-info" target="_blank">Discuss</a>
            </div>
            
            <!--<div class="modal hide fade problemModal" id="editModal">
              <form class="" action="problem/update" id="editPorblemForm" method="post">
                <div class="modal-header">
                  <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
                  <h3 id="editModalLabel">
                    Edit Problem ${problem.pid!}:
                    <a href="problem/edit/${problem.pid!}" title="Edit in another page" data-toggle="tooltip" data-placement="bottom">${problem.title!}</a>
                  </h3>
                </div>
                <div class="modal-body">
                  <a href="problem/edit/${problem.pid!}" class="btn btn-primary">Edit</a>
                </div>
                <div class="modal-footer">
                  <button type="submit" class="btn btn-primary">Save</button>
                  <button type="reset" class="btn btn-info">Reset</button>
                  <button class="btn" data-dismiss="modal">Cancel</button>
                </div>
              </form>
            </div>-->
            <div class="modal hide fade problemModal" id="submitModal">
              <form class="" id="submitForm" action="solution/save" method="post">
                <div class="modal-header">
                  <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
                  <h3 id="submitModalLabel">
                    Submit Problem ${problem.pid!}:<a href="problem/submit/${problem.pid!}"
                      title="Submit in another page" data-toggle="tooltip" data-placement="bottom">${problem.title!}</a>
                  </h3>
                </div>
                <div class="modal-body">
                  <!--<a href="problem/submit/${problem.pid!}" class="btn btn-primary">Submit</a>-->
                  <div class="alert alert-error">
                  <button type="button" class="close" data-dismiss="alert">&times;</button>
                  Sorry, youd don't have permission to submit solution.
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="submit" class="btn btn-primary">Save</button>
                  <button type="reset" class="btn btn-info">Reset</button>
                  <button class="btn" data-dismiss="modal">Cancel</button>
                </div>
              </form>
            </div>

            <section id="problem-description">
              <div class="page-header">
                <h4>Description</h4>
              </div>
              <div class="problem-content" id="problem-description">
                <pre><a href="#" id="description">${problem.description!}</a></pre>
              </div>
            </section>
            
            <section id="problem-input">
              <div class="page-header">
                <h4>Input</h4>
              </div>
              <div class="problem-content" id="problem-input">
                <pre><a href="#" id="input">${problem.input!}</a></pre>
              </div>
            </section>
            
            <section id="problem-output">
              <div class="page-header">
                <h4>Output</h4>
              </div>
              <div class="problem-content" id="problem-output">
                <pre><a href="#" id="output">${problem.output!}</a></pre>
              </div>
            </section>
            
            <section id="problem-sampleInput">
              <div class="page-header">
                <h4>Sample Input</h4>
              </div>
              <div class="problem-content" id="problem-sampleInput">
                <pre><a href="#" id="sampleInput">${problem.sampleInput!}</a></pre>
              </div>
            </section>
            
            <section id="problem-sampleOutput">
              <div class="page-header">
                <h4>Sample Output</h4>
              </div>
              <div class="problem-content" id="problem-sampleOutput">    
                <pre><a href="#" id="sampleOutput">${problem.sampleOutput!}</a></pre>
              </div>
            </section>
            
            <#if problem.hint?? && problem.hint!="">
            <section id="problem-hint">
              <div class="page-header">
                <h4>Hint</h4>
              </div>
              <div class="problem-content" id="problem-hint">
                <pre><a href="#" id="hint">${problem.hint!}</a></pre>
              </div>
            </section>
            </#if>
            
            <#if problem.source?? && problem.source!="">
            <section id="problem-source">
              <div class="page-header">
                <h4>Source</h4>
              </div>
              <div class="pre" id="problem-source">
                <a href="#" id="source">${problem.source!}</a>
              </div>
            </section>
            </#if>
            <#if tagList??>
            <section id="problem-tag">
              <div class="page-header">
                <h4>Tag</h4>
              </div>
              <div class="bootstrap-tagsinput pre" id="tag">
                <#list tagList as Tag>
                <span class="tag label label-info">
                  ${Tag.tag!}
                  <span data-role="remove"></span>
                </span>
                </#list>
              </div>
            </section>
            </#if>
            
            <form class="form-inline" action="problem/tag" method="post">
              <input type="hidden" name="op" value="add"> 
              <input type="hidden" name="pid" value="${problem.pid!}"> 
              <input type="text" class="input-small" name="tag" placeholder="Add a tag">
              <button type="submit" class="btn btn-warning">Add</button>
            </form>
            
          </div>
        </div>
      </div>
    </div>
</@override>
            
    <@override name="scripts">
      <link href="assets/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
      <script src="assets/bootstrap-editable/js/bootstrap-editable.js"></script>
      
      <link href="assets/bootstrap-editable/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.css" rel="stylesheet" type="text/css"></link>  
      <script src="assets/bootstrap-editable/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/wysihtml5-0.3.0.min.js"></script>  
      <script src="assets/bootstrap-editable/inputs-ext/wysihtml5/bootstrap-wysihtml5-0.0.2/bootstrap-wysihtml5-0.0.2.min.js"></script>
      <script src="assets/bootstrap-editable/inputs-ext/wysihtml5/wysihtml5.js"></script>
      
      <script type="text/javascript">
        $(document).ready(function(){
          var pid = ${problem.pid!};
          var apiUrl = 'api/admin/updateProblem';
          $.fn.editable.defaults.mode = 'inline';
          $.fn.editable.defaults.url = apiUrl; 
            $('#title').editable({
              type: 'text',
              pk: pid,
              title: 'Change problem title'
            });
            $('#timeLimit').editable({
              type: 'number',
              pk: pid,
              title: 'Change problem time limit',
              validate: function(value) {
                if($.trim(value) == '') {
                  return 'This field is required';
                }
                var pattern = /^[\d]{3,6}$/;
                if (!pattern.test(value)) {
                  return "The value shoulbe be a number{3,6}";
                }
              }
            });
            $('#memoryLimit').editable({
              type: 'number',
              pk: pid,
              title: 'Change problem time limit',
              validate: function(value) {
                if($.trim(value) == '') {
                  return 'This field is required';
                }
                var pattern = /^[\d]{3,6}$/;
                if (!pattern.test(value)) {
                  return "The value shoulbe be a number{3,6}";
                }
              }
            });
            $('#description').editable({
              type: 'wysihtml5',
              pk: pid,
              title: 'Change problem description'
            });
            $('#input').editable({
              type: 'wysihtml5',
              pk: pid,
              title: 'Change problem input'
            });
            $('#output').editable({
              type: 'wysihtml5',
              pk: pid,
              title: 'Change problem output'
            });
            $('#sampleInput').editable({
              type: 'textarea',
              pk: pid,
              title: 'Change problem sample input'
            });
            $('#sampleOutput').editable({
              type: 'textarea',
              pk: pid,
              title: 'Change problem sample output'
            });
            $('#hint').editable({
              type: 'wysihtml5',
              pk: pid,
              title: 'Change problem hint'
            });
            $('#source').editable({
              type: 'text',
              pk: pid,
              title: 'Change problem source'
            });
            
            var prevpage = "${baseUrl!}/admin/problem/show/${prevPid!}";
            var nextpage = "${baseUrl!}/admin/problem/show/${nextPid!}";
            $(document).keydown(function(event) {
              <#if prevPid!=problem.pid>if (event.keyCode == 37)window.location = prevpage;</#if>
              <#if nextPid!=problem.pid>if (event.keyCode == 39)window.location = nextpage;</#if>
            });
          });
      </script>
   </@override>
<@extends name="../_layout.html"></@extends>
